/**
    gulp项目开发步骤:
      1. 按照gulp目录结构创建项目
      2. 初始化项目 npm init
      3. 本地安装gulp (如果没有全局安装，需要全局安装)
      4. gulp配置文件 gulpfile.js
      5. 写任务
          5.1 压缩css,复制到dist目录
            gulp-cssmin 包

 */
const gulp = require('gulp') //引入gulp
const cssmin = require('gulp-cssmin')

// const sass = require('sass')
// const gulpSass = require('gulp-sass')
// const sassObj = gulpSass(sass)
const sass = require('gulp-sass')(require('sass'))
const babel = require('gulp-babel')
const uglify = require('gulp-uglify')
const htmlmin = require('gulp-htmlmin')
const clean = require('gulp-clean')
const webserver = require('gulp-webserver')
/**
 * 创建css构造任务
 */
gulp.task('css', function () {
  return gulp.src('./src/css/**')
    .pipe(gulp.dest('./dist/css/'))
})

/**
 * sass任务
 *   1. sass -> css
 *   2. 压缩css
 *   3. dist
 */
gulp.task('sass', function () {
  return gulp.src('./src/sass/**')
    .pipe(sass()) //sass->css
    .pipe(cssmin()) //压缩css
    .pipe(gulp.dest('./dist/css/'))
})

/**
 * js任务
 *   1. js高版本语法->低版本，兼容用户浏览器
 *        bable
 *   2. js压缩
 *   3. dist/js
 */
gulp.task('js', function () {
  return gulp.src('./src/js/**')

    // .pipe(uglify())
    .pipe(gulp.dest('./dist/js/'))

})

/**
 * html任务
 */
gulp.task('html', function () {
  return gulp.src('./src/pages/**')
    .pipe(htmlmin({
      removeEmptyAttributes: true,
      collapseWhitespace: true
    }))
    .pipe(gulp.dest('./dist/pages/'))
})

/**
 * static
 */
gulp.task('static', function () {
  return gulp.src('./src/images/**')
    .pipe(gulp.dest('./dist/images/'))
})

gulp.task('lib', function () {
  return gulp.src('./src/lib/**')
    .pipe(gulp.dest('./dist/lib/'))
})

// gulp.task('series', gulp.series('css','sass','js','html','static','lib'))
gulp.task('parallel', gulp.parallel('sass', 'js', 'html', 'static', 'lib'))


/**
 * clean
 */
gulp.task('clean', function () {
  return gulp.src('./dist/', {
      allowEmpty: true
    })
    .pipe(clean())
})

/**
 * webserver
 */
gulp.task('webserver', function () {
  return gulp.src('./dist/')
    .pipe(webserver({
      host: 'localhost',
      port: 8088,
      livereload: true,
      open: './pages/index.html'
    }))
})

/**
 * watch
 */
gulp.task('watch', function () {
  gulp.watch('./src/css/**', gulp.parallel('css'))
  gulp.watch('./src/sass/**', gulp.parallel('sass'))
  gulp.watch('./src/js/**', gulp.parallel('js'))
  gulp.watch('./src/pages/**', gulp.parallel('html'))
  gulp.watch('./src/lib/**', gulp.parallel('lib'))
  gulp.watch('./src/static/**', gulp.parallel('static'))

})

exports.default = gulp.series('clean', gulp.parallel('css','sass', 'js', 'html', 'static', 'lib'), 'webserver','watch')
